<template>
  <div>
      <van-nav-bar
      title="营养成分查询"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <el-card class="inpus">
        <el-row>
            <el-input v-model="search" placeholder="请输入食物名称"></el-input>
        </el-row>
        <el-row>
            <el-button type="primary" @click="submit">搜索</el-button>
        </el-row>
    </el-card>
    <el-card v-show="dialog" style="margin-top:10px;">
        <el-descriptions :title="item.name + '/100g'" v-for="item in tabelDate" :key="item.name">
            <el-descriptions-item label="热量(大卡)">{{item.rl}}</el-descriptions-item>
            <el-descriptions-item label="钙(毫克)">{{item.gai}}</el-descriptions-item>
            <el-descriptions-item label="蛋白质">{{item.dbz}}</el-descriptions-item>
            <el-descriptions-item label="脂肪">{{item.zf}}</el-descriptions-item>
            <el-descriptions-item label="碳水化合物">{{item.shhf}}</el-descriptions-item>
            <el-descriptions-item label="维生素C">{{item.wsfc}}</el-descriptions-item>
            <el-descriptions-item label="钠">{{item.la}}</el-descriptions-item>
        </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      search: '',
      tabelDate: [],
      dialog: false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/index')
    },
    async submit () {
      this.dialog = false
      const { data: res } = await this.$http.get('/health/nutrient/index?key=c92f20eb170cdc18ef07aeb080bebdc8&word=' + this.search + '&mode=0')
      this.tabelDate = res.newslist
      this.dialog = true
    }
  }
}
</script>

<style scoped>
.el-input{
    margin-bottom: 10px;
}
.inpus{
    width: 95%;
    margin: 0 auto;
    opacity: .7;
}
.content{
    min-height:500px;
    width: 100%;
    padding-bottom: 50px;
}
.el-button{
  display: block;
  width: 300px;
  border-radius: 10px;
  margin: 0 auto;
}
</style>
